<template>
     <div id="msg">
       <blogheader/>
       <!-- 顶部通知-->
       <el-row>
         <el-col :span="24">
           <div id="msg_head" class="grid-content bg-purple-dark">

             <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item :to="{path:'/blog'}">博客</el-breadcrumb-item>
               <el-breadcrumb-item>留言板</el-breadcrumb-item>
             </el-breadcrumb>
             <p class="inspire">选择了就要无怨无悔<span class="iconfont icon-jirou"></span></p>

          </div>
         </el-col>
       </el-row>

       <el-row >
         <el-col :span="15">
              <!--写留言-->
             <write-msg/>
         </el-col>


         <el-col :span="8">
           <div  id="history_msg" class="grid-content bg-purple" style="height: 600px">
                   <!--历史记录-->
                <history-msg/>
              </div>
         </el-col>
       </el-row>

        <!--底部-->
        <blogfooter style="background-color: rgba(0,0,0,.2)"/>
     </div>
</template>

<script>
  import  blogheader from  '../components/blogheader'
  import  blogfooter from  '../components/blogfooter'
  import  writeMsg  from  '../components/writeMsg'
  import  historyMsg from '../components/historyMsg'
  export default {
    name: 'msgBroad',
    components:{
      blogheader,
      blogfooter,
      writeMsg,
      historyMsg
    },
    data(){
      return{
        centerDialogVisible: false,
         value:'',
        form: {
          name: '',
          email: ''
        },

      }
    }
  }
</script>

<style  scoped>
   #msg{
      width: 100%;

     background-image: url("../assets/msg_bg.png");
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
   }
   #msg_head{
     margin-top: 20px;
      width: 80%;
      margin-right: 10%;
      margin-left: 10%;
     position: relative;

   }
   .inspire{
       position: absolute;
       right: 50%;
     top: 10px  ;
     /*color: rgba(0,0,0,0);*/
   }

   .el-breadcrumb{
     padding-top: 12px;
     padding-left: 1%;
   }

   /*----------*/
   .el-row {
     margin-bottom: 20px;
   }
   .el-row:last-child {
      margin-bottom: 0;
    }

   .el-col {
     border-radius: 4px;
   }
   .bg-purple-dark {
     background: #99a9bf;
   }
   .bg-purple {
     background: #d3dce6;
   }
   .bg-purple-light {
     background: #e5e9f2;
   }
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
   .row-bg {
     padding: 10px 0;
     background-color: #f9fafc;
   }
</style>
